<template>
  <el-cascader
    v-if="active"
    v-model="selections"
    :options="options"
    placeholder="选择区域"
    style="width:100%;"
    @change="handleChange"
  />
</template>
<script>
import { districtFormatter } from '@/utils/treetools'
import { getDistricts } from '@/api/amap'
export default {
  data() {
    return {
      selections: [],
      options: [],
      selectedString: '',
      active: true
    }
  },
  async created() {
    const { data } = await getDistricts()
    this.options = districtFormatter(data.districts[0].districts) // 从省级开始
    console.log('获取区域列表', this.options)
  },
  methods: {
    handleChange(selections) {
      console.log('handleChange triggered')
      // 将选择项转为字符串并传递（父组件在change事件接收）
      this.selectedString = selections.join(', ')
      this.$emit('change', this.selectedString)
    },
    echo(arr) {
      this.active = false
      this.$nextTick(() => {
        this.active = true
        this.selections = arr
      })
    }
  }
}
</script>
<style>

</style>
